<template>
  <div class="roomManage-box">
    <div class="clearBookingRecord">
        <el-button type="danger" icon="el-icon-delete" @click="deleteRoomBookingRecords"  round>无效预约记录</el-button>
    </div>
    <div class="search-box">
        <el-input
            style="width:240px"
            placeholder="请输入教室容纳人数"
            oninput ="value=value.replace(/[^\d]/g,'')"
            v-model="selectParam.number"
            clearable>
        </el-input>
        &nbsp;&nbsp;
        <el-select v-model="selectParam.roomLocation" placeholder="请选择">
            <el-option
            label="无选择"
            value=""
            >
            </el-option>
            <el-option
            v-for="(item,index) of roomLocationList"
            :key="index"
            :label="item"
            :value="item">
            </el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-button type="primary" icon="el-icon-search" @click="selectRoomList">搜索</el-button>
    </div>
    <div style="margin-top: 20px;margin-left: 5%;">
        <el-button @click="toggleSelection()" icon="el-icon-close">取消选择</el-button>
        <el-button @click="createRoomShow" icon="el-icon-plus" type="primary">新建教室</el-button>
        <el-button @click="alertRoom" icon="el-icon-edit" type="warning">修改教室信息</el-button>
        <el-button @click="deleteRoomsByIds" icon="el-icon-delete" type="danger">删除选中教室</el-button>
    </div>
    <div class="room-list-box">
        <el-table
            ref="multipleTable"
            :data="roomList"
            tooltip-effect="dark"
            :default-sort = "{prop: 'roomno', order: ' ascending'}"
            style="width: 100%;"
            @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand" style="margin-left:80px">
                        <el-form-item label="教室标识号">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="教室号">
                            <span>{{ props.row.roomno }}</span>
                        </el-form-item>
                        <el-form-item label="教室位置">
                            <span>{{ props.row.roomlocation }}</span>
                        </el-form-item>
                        <el-form-item label="容纳人数">
                            <span>{{ props.row.number }}</span>
                        </el-form-item>
                        <el-form-item label="管理员">
                            <span>{{ props.row.charge }}</span>
                        </el-form-item>
                        <el-form-item label="管理员电话">
                            <span>{{ props.row.chargephone }}</span>
                        </el-form-item>
                        <el-form-item label="教室状态">
                            <span :class="props.row.roomstate===1?'normal-text':'unormal-text'">{{ props.row.roomstate===1?'正常':'已占用' }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
            label="教室标识号"
            width="400">
            <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
            prop="roomno"
            label="教室号"
            sortable
            width="120">
            </el-table-column>
            <el-table-column
            prop="roomlocation"
            label="教室位置"
            sortable
            width="250"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="number"
            label="容纳人数"
            sortable
            show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog title="增加教室" :visible.sync="createFormVisible">
        <el-form>
            <el-form-item label="教室号" :label-width="formLabelWidth">
            <el-input placeholder="例:1101" clearable v-model="roomObj.roomno"></el-input>
            </el-form-item>
            <el-form-item label="教室位置" :label-width="formLabelWidth">
            <el-input placeholder="例:一教一楼101" clearable v-model="roomObj.roomlocation"></el-input>
            </el-form-item>
            <el-form-item label="可容纳人数" :label-width="formLabelWidth">
            <el-input placeholder="例:10" clearable oninput ="value=value.replace(/[^\d]/g,'')" v-model="roomObj.number"></el-input>
            </el-form-item>
            <el-form-item label="负责人" :label-width="formLabelWidth">
            <el-input placeholder="例:张三" :disabled="true" v-model="roomObj.charge"></el-input>
            </el-form-item>
            <el-form-item label="负责人电话" :label-width="formLabelWidth">
            <el-input placeholder="例:198...901" :disabled="true" v-model="roomObj.chargephone"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="createFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="createRoom">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="修改教室信息" :visible.sync="alertFormVisible">
        <el-form>
            <el-form-item label="教室号" :label-width="formLabelWidth">
            <el-input placeholder="例:1101" clearable v-model="roomObj.roomno"></el-input>
            </el-form-item>
            <el-form-item label="教室位置" :label-width="formLabelWidth">
            <el-input placeholder="例:一教一楼101" clearable v-model="roomObj.roomlocation"></el-input>
            </el-form-item>
            <el-form-item label="可容纳人数" :label-width="formLabelWidth">
            <el-input placeholder="例:10" clearable oninput ="value=value.replace(/[^\d]/g,'')" v-model="roomObj.number"></el-input>
            </el-form-item>
            <el-form-item label="负责人" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="roomObj.charge"></el-input>
            </el-form-item>
            <el-form-item label="负责人电话" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="roomObj.chargephone"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="alertFormVisible = false;toggleSelection();">取 消</el-button>
            <el-button plain type="primary" @click="alertRoomById">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import AES from '@/util/crypto';
import $ from 'jquery';
import {v4 as uuidv4} from 'uuid';
import { mapState } from 'vuex';
export default {
    name:'roomManage',
    data(){
        return{
            createFormVisible:false,
            alertFormVisible:false,
            multipleSelection: [],
            formLabelWidth: '120px',
            selectParam:{
                number:null,
                roomLocation:''
            },
            roomObj:{
                roomno:'',
                roomlocation:'',
                number:null,
                charge:'',
                chargephone:''
            },
            roomListData:[]
        }
    },
    methods:{
        toggleSelection(rows) {
            if (rows) {
            rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
            });
            } else {
            this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        selectRoomList(){
            this.$store.dispatch("_room/getRoomListByCondition",this.selectParam)
        },
        createRoomShow(){
            let user=JSON.parse(AES.decrypt(sessionStorage.getItem("userObj")));
            this.roomObj.charge=user.account;
            this.roomObj.chargephone=user.telephone;
            this.createFormVisible=true;
        },
        createRoom(){
            if(this.roomObj.roomno===''||this.roomObj.roomlocation===''||
            this.roomObj.number===null||this.roomObj.charge===''||this.roomObj.chargephone===''){
                this.$notify({
                    title: '警告',
                    message: '请检查输入是否存在空缺',
                    type: 'warning'
                });
                return;
            }
            let obj=Object.assign(this.roomObj,{'id':uuidv4().slice(0,-4)});
            this.$store.dispatch("_room/createRoom",obj)
            this.createFormVisible=false;
        },
        alertRoom(){
            if(this.multipleSelection.length!=1){
                this.$notify({
                    title: '警告',
                    message: '请选择一条记录',
                    type: 'warning'
                });
                return;
            }
            let user=JSON.parse(AES.decrypt(sessionStorage.getItem("userObj")));
            this.roomObj.roomno=this.multipleSelection[0].roomno;
            this.roomObj.roomlocation=this.multipleSelection[0].roomlocation;
            this.roomObj.number=this.multipleSelection[0].number;
            this.roomObj.charge=user.account;
            this.roomObj.chargephone=user.telephone;

            this.alertFormVisible=true;
        },
        alertRoomById(){
            if(this.roomObj.roomno===''||this.roomObj.roomlocation===''||
            this.roomObj.number===null||this.roomObj.charge===''||this.roomObj.chargephone===''){
                this.$notify({
                    title: '警告',
                    message: '请检查输入是否存在空缺',
                    type: 'warning'
                });
                return;
            }
            let obj=Object.assign(this.roomObj,{'id':this.multipleSelection[0].id})
            this.$store.dispatch("_room/updateRoomById",obj)
            this.alertFormVisible=false;
            this.toggleSelection();
        },
        deleteRoomsByIds(){
            if(this.multipleSelection===0){
                this.$notify({
                    title: '警告',
                    message: '请必须选择记录删除',
                    type: 'warning'
                });
                return;
            }
            this.$confirm('此操作将删除教室记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                let arr=[];
                $.each(this.multipleSelection,function(index,item){
                    arr.push(item.id)
                })
                this.$store.dispatch("_room/deleteRoomByIds",arr);
                this.toggleSelection();
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });     
            this.toggleSelection();     
            });
        },
        deleteRoomBookingRecords(){
            let nowTime=this.dayjs().subtract(30,'d').format("YYYY-MM-DD");
            this.$confirm('此操作将删除'+nowTime+'前教室预约记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.$store.dispatch("_room/deleteBookingInvalidRecord",{'timeSign':nowTime})
            this.$message({
                type: 'success',
                message: '正在删除...'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        }
    },
    computed:{
        ...mapState('_room',['roomLocationList','roomList'])
    },
    mounted(){
        this.$store.dispatch("_room/getRoomLocationList")
        this.$store.dispatch("_room/getRoomListByCondition",this.selectParam)
    },
    watch:{
        'roomList':{
            deep:true,
            immediate:true,
            handler(newValue,oldValue){
                this.roomListData=newValue
            }
        }
    }
}
</script>

<style scoped lang="css">
    .clearBookingRecord{
        position: inherit;
        top: 1%;
        right: 1%;
    }
    .roomManage-box{
        position:inherit;
        top:0;
        height:100%;
        left:0;
        width:100%;
        overflow: auto;
    }
    .search-box{
        margin-top: 2%;
        margin-left: 5%;
        height: 7%;    
        width:90%;    
    }
    .room-list-box{
        position: inherit;
        margin-top: 2%;
        left: 5%;
        width:85%;
        height: 70%;
        overflow: auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .normal-text{
        color: black;
    }
    .unormal-text{
        color: red;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>